<template>
  <div>
    <el-container>
      <!--侧边栏-->
      <el-aside  class="container" :width="asideWidth"  style="min-height:100vh;background-color: #001529;">


        <div style="height: 60px;color:white;
        display: flex; align-items: center; justify-content: center">
          logo
        </div>
        <el-menu :collapse="isCollapse"
        :collapse-transition="false" router background-color="#001529"
        active-text-color="#FFF"
         text-color="rgba(255,255,255,0.65)" style="border:none;"
           :default-active="$route.path">
          <el-menu-item index="/">
<i class="el-icon-house"></i>
              <span >系统首页</span>
          </el-menu-item>

          <el-menu-item index="/element">
            <i class="el-icon-house"></i> <span >系统首页</span></el-menu-item>
          <el-menu-item>
            <i class="el-icon-house"></i>
             <span >系统首页</span></el-menu-item>
          <el-menu-item>
            <i class="el-icon-house"></i> <span >系统首页</span></el-menu-item>
          <el-submenu index="/">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span> <span >系统首页</span></span>
            </template>
            <el-menu-item>
               <span >系统首页</span>
            </el-menu-item>
            <el-menu-item>
               <span >系统首页</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <!-- 头部区域-->
        <el-header>
          <i class="el-icon-menu" style="width: 40px;margin-top: 20px;" @click="handCollapse"></i>
          头部
        </el-header>
        <!-- 主题区域-->
        <el-main>
          主体
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
  export default{
    name:'HomeView',
    data(){
      return{
        isCollapse:false,//不收缩
        asideWidth:'200px'
      }
    },
    methods:{
      handCollapse(){
        this.isCollapse=!this.isCollapse;
        this.asideWidth= this.isCollapse ? '64px' : '200px';
      }
    }
  }
</script>
<style>
  .el-menu-inline{
    background-color: #000c17 !important;
  }
  .el-menu-inline .el-menu-item{
    background-color: #000c17 !important;
    padding-left: 49px !important;
  }
  .el-menu-item:hover, .el-submenu__title:hover{
    color: #FFF !important;
  }
  .el-submenu__title:hover i{
    color: #FFF !important;
  }
  .el-menu-item.is-active{
    background-color: #1890ff !important;
    border-radius: 5px !important;
    width: calc(100%-8px);
    margin-left:4px;
  }
  .el-menu-item.is-active i{
    margin-left: -4px;
  }
  .el-menu-item{
    height: 40px !important;
    line-height: 40px !important;
  }
  .el-submenu__title{
    height: 40px !important;
    line-height: 40px !important;
    margin: 4px !important;
  }

</style>
